<template>
  <view class="container">
    <!-- 背景图层 -->
    <view class="background-layer"></view>
    
    <!-- 头部搜索栏 -->
    <view class="search-header">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="搜索演唱会、艺人" v-model="searchText" confirm-type="search" @confirm="handleSearch" />
        <text class="clear-btn" v-if="searchText" @tap="clearSearch">×</text>
      </view>
    </view>
    
    <!-- 演唱会列表 -->
    <scroll-view 
      scroll-y 
      class="concert-list"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="concert-item" v-for="(item, index) in displayedConcerts" :key="index" @tap="navigateToDetail(item.id)">
        <view class="concert-card-inner">
          <!-- 左侧海报图 -->
          <view class="concert-image-container">
            <image class="concert-image" :src="item.imgUrl" mode="aspectFill"></image>
            <view class="group-tag" v-if="item.isGroupBuying">拼团</view>
          </view>
          
          <!-- 右侧信息区 -->
          <view class="concert-info">
            <!-- 标题行 -->
            <view class="concert-title-row">
              <text class="concert-title">{{ item.title }}</text>
            </view>
            
            <!-- 信息区域 -->
            <view class="info-container">
              <!-- 歌手信息 -->
              <view class="meta-item">
                <text class="meta-label">歌手:</text>
                <text class="meta-text">{{ item.singer }}</text>
              </view>
              
              <!-- 位置信息 -->
              <view class="meta-item">
                <text class="meta-label">场地:</text>
                <text class="meta-text">{{ item.location }}</text>
              </view>
              
              <!-- 时间信息 -->
              <view class="meta-item">
                <text class="meta-label">时间:</text>
                <text class="meta-text">{{ formatDate(item.createTime) }} - {{ formatDate(item.endTime) }}</text>
              </view>
            </view>
            
            <!-- 底部状态栏 - 只显示拼团按钮 -->
            <view class="card-footer" v-if="item.isGroupBuying">
              <view class="group-status-indicator">
                <view class="status-badge active-badge">
                  <text>可拼团</text>
                </view>
                <text class="group-counter">{{ item.currentGroupCount }}/{{ item.requiredGroupCount }}</text>
              </view>
              
              <!-- 拼团按钮 -->
              <view class="action-btn" @tap.stop="joinGroup(item)">
                <text>去拼团</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading-more glass-card" v-if="isLoading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 无更多数据 -->
      <view class="no-more glass-card" v-if="isAllLoaded && displayedConcerts.length > 0">
        已加载全部演唱会
      </view>
      
      <!-- 无数据提示 -->
      <view class="empty-tip" v-if="displayedConcerts.length == 0 ">
        <!-- <image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image> -->
        <text class="empty-text">暂无演唱会信息</text>
      </view>
    </scroll-view>
    
    <!-- 底部安全区域占位 -->
    <view class="tabbar-placeholder"></view>
    
    <!-- TabBar组件 -->
    <cc-myTabbar :tabBarShow="1"></cc-myTabbar>
  </view>
</template>

<script>
import { concertList } from "../../api/pt";
export default {
  data() {
    return {
      // 搜索相关
      searchText: '',
      
      // 列表相关
      concertList: [],
      page: 1,
      pageSize: 10,
      isLoading: false,
      isAllLoaded: false,
      isRefreshing: false
    };
  },
  
  computed: {
    displayedConcerts() {
      return this.concertList;
    }
  },
  
  onReady() {
    
  },
  
  mounted() {
    this.fetchConcertData();
  },
  
  methods: {
    // 格式化日期，只保留年月日
    formatDate(dateString) {
      if (!dateString) return '';
      // 如果包含时间，则只截取日期部分
      if (dateString.includes(' ')) {
        return dateString.split(' ')[0];
      }
      return dateString;
    },
    
    // 获取演唱会数据
    async fetchConcertData() {
      if (this.isLoading || this.isAllLoaded) return;
      
      this.isLoading = true;
      
      try {
        const params = {
          page: this.page,
          pageSize: this.pageSize,
          keyword: this.searchText.trim()
        };
        
        const response = await concertList(params);
        
        if (response.code === 200) {
          const newItems = response.rows || [];
          
          // 如果没有更多数据了
          if (newItems.length === 0) {
            this.isAllLoaded = true;
          } else {
            this.concertList = [...this.concertList, ...newItems];
            this.page++;
          }
        } else {
          uni.showToast({
            title: response.msg || '获取数据失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取演唱会数据失败:', error);
        uni.showToast({
          title: '获取数据失败，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
        this.isRefreshing = false;
      }
    },
    
    // 搜索相关方法
    handleSearch() {
      this.page = 1;
      this.concertList = [];
      this.isAllLoaded = false;
      this.fetchConcertData();
    },
    
    clearSearch() {
      this.searchText = '';
    },
    
    // 加载更多
    loadMore() {
      this.fetchConcertData();
    },
    
    // 刷新
    onRefresh() {
      this.isRefreshing = true;
      this.page = 1;
      this.concertList = [];
      this.isAllLoaded = false;
      this.fetchConcertData();
    },
    
    // 加入拼团
    joinGroup(item) {
     uni.navigateTo({
        url: `/pages/concert/list`
      });
    },
    
    // 跳转到详情页
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/concert/list?id=${id}`
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  padding-bottom: 0;
  background-color: #7928ca;
  background-image: linear-gradient(135deg, #7928ca 0%, #ff0080 100%);
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://picsum.photos/id/237/1080/1920');
  background-size: cover;
  background-position: center;
  filter: blur(30px);
  opacity: 0.15;
  z-index: 0;
}

/* 确保所有内容在背景层之上 */
.search-header, .concert-list, .tabbar-placeholder {
  position: relative;
  z-index: 1;
}

/* 搜索栏样式 */
.search-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(121, 40, 202, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 16rpx 20rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.search-bar {
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 40rpx;
  padding: 12rpx 20rpx;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6rpx 20rpx rgba(31, 38, 135, 0.08);
}

.search-icon {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 12rpx;
}

.search-bar input {
  flex: 1;
  height: 56rpx;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}

.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.clear-btn {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.7);
  width: 50rpx;
  text-align: center;
}

/* 列表样式 */
.concert-list {
  height: calc(100vh - 140rpx - 110rpx);
  padding: 12rpx 20rpx;
  box-sizing: border-box;
  margin-bottom: 0;
  flex: 1;
  overflow: hidden;
}

.concert-item {
  margin-bottom: 24rpx;
  border-radius: 24rpx;
  overflow: visible;
  transition: transform 0.3s, box-shadow 0.3s;
}

.concert-item:active {
  transform: translateY(4rpx) scale(0.98);
}

.concert-card-inner {
  display: flex;
  flex-direction: row;
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 图片容器和样式 */
.concert-image-container {
  position: relative;
  width: 220rpx;
  min-width: 220rpx;
  height: 280rpx;
  overflow: hidden;
}

.concert-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.concert-item:active .concert-image {
  transform: scale(1.05);
}

.group-tag {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  background: rgba(255, 0, 128, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 22rpx;
  font-weight: bold;
  padding: 6rpx 14rpx;
  border-radius: 16rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
}

/* 信息区域样式 */
.concert-info {
  flex: 1;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  width: calc(100% - 220rpx);
}

.concert-title-row {
  margin-bottom: 10rpx;
}

.concert-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #ffec99;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
  letter-spacing: 1rpx;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 12rpx;
  width: 100%;
}

.meta-item {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10rpx;
  padding: 8rpx 12rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  box-sizing: border-box;
  min-height: 45rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.meta-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.meta-label {
  font-size: 26rpx;
  color: #ffc2e2;
  margin-right: 10rpx;
  min-width: 65rpx;
  font-weight: 550;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.15);
}

.meta-text {
  font-size: 26rpx;
  color: #d0f5ff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.5rpx;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.15);
}

/* 卡片底部 */
.card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.group-status-indicator {
  display: flex;
  align-items: center;
  gap: 8rpx;
  max-width: 60%;
  overflow: hidden;
}

.status-badge {
  background-color: rgba(255, 0, 128, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 6rpx 14rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #f1f8ff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-badge.active-badge {
  background-color: rgba(255, 0, 128, 0.8);
  color: #fff8bd;
}

.group-counter {
  font-size: 22rpx;
  color: #d0f5ff;
}

.action-btn {
  background: linear-gradient(135deg, #7928ca 0%, #ff0080 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8rpx 22rpx;
  border-radius: 30rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 6rpx 16rpx rgba(31, 38, 135, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.action-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 10rpx rgba(31, 38, 135, 0.1);
}

.action-btn text {
  font-size: 24rpx;
  font-weight: 500;
  color: #fff;
}

/* 加载更多和无数据样式 */
.glass-card {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6rpx 24rpx rgba(31, 38, 135, 0.08);
  margin: 16rpx 0;
  text-align: center;
}

.loading-more, .no-more {
  color: #ffc2e2;
  font-size: 26rpx;
}

.loading-spinner {
  width: 36rpx;
  height: 36rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-top: 3rpx solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 10rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 空状态 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 24rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8rpx 30rpx rgba(31, 38, 135, 0.08);
  margin-top: 40rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  opacity: 0.7;
}

.empty-text {
  font-size: 28rpx;
  color: #d0f5ff;
}

/* TabBar占位元素 */
.tabbar-placeholder {
  height: 90rpx;
  width: 100%;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .tabbar-placeholder {
    height: calc(90rpx + constant(safe-area-inset-bottom));
    height: calc(90rpx + env(safe-area-inset-bottom));
  }
  
  .concert-list {
    height: calc(100vh - 140rpx - 110rpx - constant(safe-area-inset-bottom));
    height: calc(100vh - 140rpx - 110rpx - env(safe-area-inset-bottom));
  }
}

/* 确保 TabBar 组件在最上层 */
:deep(.cc-myTabbar) {
  z-index: 999 !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
